<template>
  <div class="demo-image__preview">
    <el-image
      :style="`width: ${ratio}px; height: ${ratio}px`"
      :src="url"
      :preview-src-list="srcList"
    />
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    ratio: {
      type: String,
      default: '100'
    }
  },
  data() {
    return {
      url: ``,
      srcList: [``]
    }
  },
  watch: {
    'src'(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.url = `${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${newValue}`
        this.srcList = [`${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${newValue}`]
      }
    }
  },
  created() {
    if (this.src === '') return
    this.url = `${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${this.src}`
    this.srcList = [`${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${this.src}`]
  }
}
</script>
